<template>
  <div>
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="全部" name="first">
          <div class="sp">
            <span>申请类型：</span>
            <el-radio v-model="radio" label="2">离职</el-radio>
            <el-radio v-model="radio" label="0">请假</el-radio>
            <el-radio v-model="radio" label="1">加班</el-radio>
            <el-radio v-model="radio" label="3">调休</el-radio>
          </div>
          <div>
            <span>审批状态：</span>
            <el-checkbox-group v-model="checkList">
              <el-checkbox :label="0">审批中</el-checkbox>
              <el-checkbox :label="1">审批通过</el-checkbox>
              <el-checkbox :label="-1">审批驳回</el-checkbox>
              <el-checkbox :label="2">已撤销</el-checkbox>
            </el-checkbox-group>
          </div>
          <!-- 表格 -->
          <el-table :data="approvalAll" style="width: 100%">
            <el-table-column type="index" label="序号" width="80">
            </el-table-column>
            <el-table-column label="审批类型" width="150">
              <template slot-scope="scope">
                <span v-if="scope.row.type == '2'">离职</span>
                <span v-if="scope.row.type == '0'">请假</span>
                <span v-if="scope.row.type == '3'">调休</span>
                <span v-if="scope.row.type == '1'">加班</span>
              </template>
            </el-table-column>
            <el-table-column prop="u_id.user" label="申请人" width="150">
            </el-table-column>
            <el-table-column prop="checker.user" label="当前审批人" width="150">
            </el-table-column>
            <el-table-column label="申请时间">
              <template slot-scope="scope">
                {{ scope.row.date | dateFormat }}
              </template>
            </el-table-column>
            <el-table-column label="审批状态">
              <template slot-scope="scope">
                <span v-if="scope.row.state == '1'">通过</span>
                <span v-if="scope.row.state == '0'">审批中</span>
                <span v-if="scope.row.state == '-1'">驳回</span>
                <span v-if="scope.row.state == '2'">撤回</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  v-if="scope.row.u_id._id != user._id & scope.row.state == 0"
                  size="mini"
                  @click="editapprovals(scope.row._id,1)"
                  >通过</el-button
                >
                <el-button
                  type="primary"
                  v-if="scope.row.u_id._id != user._id  & scope.row.state == 0"
                  size="mini"
                  @click="editapprovals(scope.row._id,-1)"
                  >驳回</el-button
                >
                <el-button type="primary" size="mini">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 我发起的 -->
        <el-tab-pane label="我发起的" name="second">
          <div class="sp">
            <span>申请类型：</span>
            <el-radio v-model="radio" label="2">离职</el-radio>
            <el-radio v-model="radio" label="0">请假</el-radio>
            <el-radio v-model="radio" label="1">加班</el-radio>
            <el-radio v-model="radio" label="3">调休</el-radio>
          </div>
          <div>
            <span>审批状态：</span>
            <el-checkbox-group v-model="checkList">
              <el-checkbox :label="0">审批中</el-checkbox>
              <el-checkbox :label="1">审批通过</el-checkbox>
              <el-checkbox :label="-1">审批驳回</el-checkbox>
              <el-checkbox :label="2">已撤销</el-checkbox>
            </el-checkbox-group>
          </div>
          <!-- 表格 -->
          <el-table :data="approval" style="width: 100%">
            <el-table-column type="index" label="序号" width="80">
            </el-table-column>
            <el-table-column label="审批类型" width="150">
              <template slot-scope="scope">
                <span v-if="scope.row.type == '2'">离职</span>
                <span v-if="scope.row.type == '0'">请假</span>
                <span v-if="scope.row.type == '3'">调休</span>
                <span v-if="scope.row.type == '1'">加班</span>
              </template>
            </el-table-column>
            <el-table-column prop="u_id.user" label="申请人" width="150">
            </el-table-column>
            <el-table-column prop="checker.user" label="当前审批人" width="150">
            </el-table-column>
            <el-table-column label="申请时间">
              <template slot-scope="scope">
                {{ scope.row.date | dateFormat }}
              </template>
            </el-table-column>
            <el-table-column label="审批状态">
              <template slot-scope="scope">
                <span v-if="scope.row.state == '1'">通过</span>
                <span v-if="scope.row.state == '0'">审批中</span>
                <span v-if="scope.row.state == '-1'">驳回</span>
                <span v-if="scope.row.state == '2'">撤回</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="editapprovals(scope.row._id,2)"
                  >撤销</el-button
                >
                <el-button type="primary" size="mini">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 待审批的 -->
        <el-tab-pane label="待审批" name="third">
          <div class="sp">
            <span>申请类型：</span>
            <el-radio v-model="radio" label="2">离职</el-radio>
            <el-radio v-model="radio" label="0">请假</el-radio>
            <el-radio v-model="radio" label="1">加班</el-radio>
            <el-radio v-model="radio" label="3">调休</el-radio>
          </div>
          <!-- 表格 -->
          <el-table :data="approvallist" style="width: 100%">
            <el-table-column type="index" label="序号" width="80">
            </el-table-column>
            <el-table-column label="审批类型" width="150">
              <template slot-scope="scope">
                <span v-if="scope.row.type == '2'">离职</span>
                <span v-if="scope.row.type == '0'">请假</span>
                <span v-if="scope.row.type == '3'">调休</span>
                <span v-if="scope.row.type == '1'">加班</span>
              </template>
            </el-table-column>
            <el-table-column prop="u_id.user" label="申请人" width="150">
            </el-table-column>
            <el-table-column prop="checker.user" label="当前审批人" width="150">
            </el-table-column>
            <el-table-column label="申请时间">
              <template slot-scope="scope">
                {{ scope.row.date | dateFormat }}
              </template>
            </el-table-column>
            <el-table-column label="审批状态">
              <template slot-scope="scope">
                <span v-if="scope.row.state == '1'">通过</span>
                <span v-if="scope.row.state == '0'">审批中</span>
                <span v-if="scope.row.state == '-1'">驳回</span>
                <span v-if="scope.row.state == '2'">撤回</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="editapprovals(scope.row._id,1)"
                  >通过</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="editapprovals(scope.row._id,-1)"
                  >驳回</el-button
                >
                <el-button type="primary" size="mini">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!--    查看的对话框 -->
  </div>
</template>

<script>
import { getapproval, editapproval } from "@/axios/approval";
import { mapState } from "vuex";
export default {
  name: "Vue",
  props: {},
  data() {
    return {
      activeName: "first",
      radio: "wu",
      checkList: [],
      //   所有审批
      approvalAll: [],
      //   待审批
      approvallist: [],
      //   我发起的
      approval: [],
    };
  },
  mounted() {
    this.getapprovals();
  },
  methods: {
    async getapprovals() {
      let { data } = await getapproval({
        type: this.radio,
        state: JSON.stringify(this.checkList)
      });
      if (data.code != 200) {
        this.$message.error(data.msg);
        return;
      }
      this.approvalAll = data.data;
      this.approvallist = data.data.filter((item) => {
        return (item.state == 0) & (item.u_id._id != this.user._id);
      });
      this.approval = data.data.filter((item) => {
        return item.u_id._id == this.user._id;
      });
    },
    // 修改
    async editapprovals(id, state) {
      let { data } = await editapproval({ id,state});
      if (data.code != 200) {
        this.$message.error(data.msg);
        return;
      }
      this.$message.success("审批完成");
      this.getapprovals();
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  watch:{
    radio(id){
       this.getapprovals()
    },
    checkList(){
        this.getapprovals()
    }
  }
};
</script>

<style lang="scss" scoped>
.el-checkbox-group {
  display: inline;
}
.sp {
  margin-bottom: 10px;
}
.el-table {
  margin-top: 40px;
}
</style>
